<template>
	<view class="MyAddress">
		<topbar-my-address></topbar-my-address>
		<view class="bgcolor"></view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view>
				<view v-for="(item,index) in listAddress" :key="index" class="MyAddress-list">
					<Address :address ="item"></Address>
					<u-icon name="edit-pen" color="#aeb0b6" size="40" @click="changeAddress(item)"></u-icon>
				</view>
			</view>
		</scroll-view>
		<u-button hover-class="none" shape="circle" :custom-style="commitMall"  @click="addAddress">新增地址</u-button>
	</view>
</template>

<script>
	import TopbarMyAddress from "./childMyAddress/TopbarMyAddress.vue"
	import Address from "components/content/Address.vue"
	
	import {getOrderAddress} from "network/orderMsg.js"
	
	export default {
		onLoad() {
			this._getOrderAddress()
		},
		activated() {
			this._getOrderAddress()
		},
		components:{
			TopbarMyAddress,
			Address
		},
		data() {
			return {
				listAddress:[],
				commitMall:{
					color: "#FFFFFF",
					width:"95%",
					fontSize: "30rpx",
					backgroundColor:"#0C34BA",
					position:"absolute",
					bottom:"20rpx",
					left:"20rpx",
					right:"20rpx"
				},
			}
		},
		methods:{
			changeAddress(item){
				let aid = item.aid
				uni.navigateTo({
					url:`./ChangeAddress?aid=${aid}`
				})
			},
			addAddress(){
				uni.navigateTo({
					url:"./NewAddress"
				})
			},
			_getOrderAddress(){
				getOrderAddress().then(res=>{
					if(res.data.code == 20000){
						let isdefault
						this.listAddress = res.data.result
						this.listAddress.forEach((e,index)=>{
							if(e.isDefault == 1){
								isdefault = e
								this.listAddress.splice(index,1)
								return
							}
						})
						if(isdefault){
							this.listAddress.unshift(isdefault)
						}
					}	
				})
			}
		}
	}
</script>

<style scoped>
	.MyAddress{
		position: relative;
		height: 100vh;
	}
	.bgcolor{
		width: 100%;
		height: 200rpx;
		background-color: #0C34BA
	}
	.scroll-Y{
		position: absolute;
		top: 255rpx;
		left: 20rpx;
		right: 20rpx;
		bottom: 80rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #FFFFFF;
		width: 95%;
	}
	.MyAddress-list{
		/* margin-top: 40rpx; */
		display: flex;
		justify-content: space-between;
		margin: 40rpx 40rpx 20rpx 40rpx;
		padding-bottom: 20rpx;
		border-bottom:1rpx solid  #cfd2da;
	}
</style>
